<!-- components/PassiveSlider.vue -->
<template>
    <el-slider
        v-model="model"
        v-bind="$attrs"
        :class="sliderClass"
        @mousedown="handleMouseDown"
        @touchstart="handleTouchStart"
    />
</template>

<script setup>
import { ref, watch } from 'vue';

const isTouchDevice = ref(
    'ontouchstart' in window || navigator.maxTouchPoints > 0,
);
// 设备专属样式绑定
const sliderClass = ref({
    'touch-device': isTouchDevice.value,
    'pointer-device': !isTouchDevice.value,
});

const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);

const model = ref(props.modelValue);
watch(model, (val) => emit('update:modelValue', val));

// 重写事件处理器
const handleMouseDown = (e) => {
    e.preventDefault();
    // 添加自定义拖动逻辑...
};

const handleTouchStart = (e) => {
    e.preventDefault();
    // 添加自定义触摸逻辑...
};
</script>

<style scoped>

/* 触控设备样式 */
.touch-device :deep(.el-slider__button) {
    touch-action: none;
    pointer-events: auto;
}

/* 指针设备样式 */
.pointer-device :deep(.el-slider__button) {
    touch-action: none;
    pointer-events: none;
}
</style>